<template>
  <!-- pages/login/login.wxml -->
  <view>
    <view class="login_ding">
      <view>
        <view class="login_ding_1">
          <view>1</view>
        </view>
        <view>授权登录</view>
      </view>

      <view>
        <view class="login_ding_2">2</view>
        <view class="login_ding_2_">绑定手机</view>
      </view>
    </view>

    <view class="login_zhong">
      <view>登录后您可以进行一下操作：</view>
    </view>

    <view class="login_di">
      <view class="login_di_">
        <view class="login_dian"></view>
        <view>在线预订</view>
      </view>

      <view class="login_di_">
        <view class="login_dian"></view>
        <view>预订信息查询</view>
      </view>
    </view>

    <view class="login_butter" @tap="handleAuth">
      <view>授权登录</view>
    </view>
    <view style="display: flex;font-size: 12px;justify-content: center;margin-top: 14px">
      <u-checkbox activeColor="rgba(72, 184, 128, 0.808)" @change="suspendchange" shape="circle" size="12" :checked="suspend" labelSize="12" label="我已阅读并同意"></u-checkbox>
      <navigator url="/packageD/protocol/protocol" style="color: rgba(72, 184, 128, 0.808)">《用户协议》</navigator>
      和
      <navigator url="/packageD/protocol/privacy" style="color: rgba(72, 184, 128, 0.808)">《隐私政策》</navigator>
    </view>
  </view>
</template>

<script>
// pages/login/login.js
import {userlogin} from "@/common/api";

var app = getApp()
export default {
  data() {
    return {
      suspend: ''
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    suspendchange(e) {
      this.suspend = e
    },
    handleAuth() {
      if (this.suspend){
        userlogin((res, code) => {
          console.log('userlogin', res);
          uni.navigateTo({url: '/packageC/login/login2?wxapp_open_id=' + res.data.data.wxapp_open_id + '&code=' + code})
        });
      }else {
        uni.showToast({
          icon:'none',
          title:'请勾选隐私政策和用户协议'
        })
      }
    },
  }
};
</script>
<style>
.login_ding {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 40rpx;
}

.login_ding_1 {
  width: 40rpx;
  height: 40rpx;
  margin-left: 45rpx;
  padding: 5rpx;
  background-color: blanchedalmond;
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.login_ding_2 {
  width: 40rpx;
  height: 40rpx;
  margin-left: 45rpx;
  padding: 5rpx;
  background-color: rgba(119, 106, 106, 0.253);
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
  color: rgb(255, 255, 255);
}

.login_ding_2_ {
  color: rgba(180, 179, 179, 0.849);
}

.login_zhong {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 30rpx;
  margin-top: 100rpx;
}

.login_di {
  display: flex;
  margin-top: 80rpx;
  justify-content: center;
  font-size: 24rpx;
}

.login_dian {
  width: 8rpx;
  height: 8rpx;
  background-color: rgb(196, 146, 71);
  border-radius: 50%;
  margin-right: 10rpx;
}

.login_di_ {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 40rpx;
  color: rgb(99, 96, 96);
}

.login_butter {
  display: flex;
  background-color: blanchedalmond;
  justify-content: center;
  align-items: center;
  margin: 60rpx 40rpx 0 40rpx;
  height: 100rpx;
  border-radius: 8rpx;
  color: rgb(134, 94, 33);
  font-weight: 900;
  font-family: '黑体', 'SimSun', sans-serif;
}
</style>
